<template>
	<view class="detail">
		<view v-if="loadState">
			<view class="title">{{detail.title}}</view>
			<view class="info">
				<text>{{detail.author}}</text>
				<uni-dateformat :date="detail.posttime" format="yyyy年MM月dd日 hh:mm:ss"></uni-dateformat>
			</view>
			<view class="content">
				{{detail.content}}
			</view>
			<view class="btnGroup">
				<button size="mini" @click="goEdit">修改</button>
				<button size="mini" type="warn" @click="onRemove">删除</button>
			</view>
		</view>
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	let id;
	export default {
		data() {
			return {
				detail: {},
				loadState: false
			};
		},
		onLoad(e) {
			id = e.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				uniCloud.callFunction({
					name: 'art_get_row',
					data: {
						id
					}
				}).then(res => {
					this.detail = res.result.data[0]
					this.loadState = true
					uni.setNavigationBarTitle({
						title: this.detail.title
					})
				}).catch(() => {
					uni.showToast({
						icon: 'error',
						title: '参数有误'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 800)
				})
			},
			goEdit() {
				uni.navigateTo({
					url: `/pages/edit/edit?id=${id}`
				})
			},
			onRemove() {
				uni.showModal({
					content: '是否确认删除？',
					success(res) {
						if (res.confirm) {
							this.removeFun()
						}
					}
				})
			},
			removeFun() {
				uniCloud.callFunction({
					name: 'art_remove_row',
					data: {
						id
					}
				}).then(res => {
					uni.showToast({
						title: '删除成功'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding: 30upx;
		.title {
			font-size: 50upx;
			color: #000000;
			text-align: justify;
			line-height: 1.4em;
		}
		.info {
			font-size: 30upx;
			color: #666666;
			padding: 30upx 0 60upx;
			text {
				padding-right: 30upx;
			}
		}
		.content {
			font-size: 36upx;
			line-height: 1.7em;
		}
		.btnGroup {
			padding: 50upx 0;
			button {
				margin-right: 30upx;
			}
		}
	}
</style>
